<template>
  <div>
    <div style="padding-top:20px">
        <h2 class="border-title">往期直播</h2>
    </div>
    <SearchSelector
      ref="refSearchSelector"
      @doSearch="onSearch"
    ></SearchSelector>
    <div class="school-content mb30">
      <div class="school-list-container" 
      v-for="(item, index) in schoolList" 
       @mouseenter="hover(item)"
      @mouseleave="hoverLeave(item)"
      @click="goInfo(item)">
       <div class="card-box" >
        <div class="card-label" v-show="item.show">观看回放</div>
        <div class="card-img" >
          <img class="big-img" :class="{'img-filter':item.show}" :src="item.liveImg" alt="">
        </div>
        <div class="card-text">
          <p :class="['title',{'text-active':item.show}]">
            <img :src="item.show?'/images/icon_video_hover.svg':'/images/icon_video_def.svg'" alt=""> {{item.schoolName}}
          </p>
          <p v-if="item.info" class="info clamp2-ellipsis">
            {{item.info}}
          </p>
        </div>
      </div>
       
      </div>
    </div>
    <div >
 <el-pagination
          class="mb30 pagination"
          @size-change="onSizeChange"
          @current-change="onCurrentChange"
          :current-page="pageNo"
          :page-sizes="[24, 30, 40]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          background
          :total="total">
        </el-pagination>
    </div>
    
  </div>
</template>

<script>
import SearchSelector from './comp/SearchSelector'
import { simplifyArray } from '../../utils/array.util'
import { checkLogin } from '../../utils/checkLogin'
export default {
  name: 'UniversityInfo',
  components: {
    SearchSelector
  },
  data () {
    return {
      pageNo: 1,
      pageSize: 24,
      total: 0,
      schoolList: [],
      schoolHotList: [],
      searchModel: {
        keyWord:this.name,
        provinceId:this.provinceId,
      },
    }
  },
  mounted () {
    this.setPropertyId()
    this.getSchoolList()
    this.getSchoolHotList()
  },
  methods: {
    setPropertyId () {
      const propertyId = this.$route.query.propertyId
      if (propertyId) {
        this.$refs.refSearchSelector.setPropertyId(propertyId)
      }
    },
    goUniversityInfoDetail (id) {
      this.$router.push({
        path: '/universityInfoDetail',
        query: { id }
      })
    },
    onSizeChange (val) {
      this.pageSize = val
      this.getSchoolList()
    },
    onCurrentChange (val) {
      this.pageNo = val
      this.getSchoolList()
    },
    onSearch (searchModel) {
      this.searchModel = searchModel
      this.pageNo = 1
      this.getSchoolList()
    },
     // 直播跳转检查直播码
      handleVideoClick (id) {
        return this.$http.get('/liveVideoController/clickVideoByUser', { id })
      },
      // 跳转直播
      goInfo ({ id, title }) {
       if(checkLogin()){
         this.handleVideoClick(id).then(value => {
          if (value.status === 501) {
            return
          }
          if (value.status === 2004 || value.status === 2005) {
            this.$router.push({
              path: '/liveDetail',
              query: { id, title }
            })
            return
          }
          if (value.state === 2) {
            window.open(`#/videoPlay?title=${title}&videoUrl=${value.backUrl}`)
          } else {
            window.open(value.url)
          }
        })
       } else {
          this.$store.commit('ToggleLoginOpen', true)
        }
        
      },
     hover (item) {
        this.$set(item, 'show', true)
      },
      hoverLeave (item) {
        this.$set(item, 'show', false)
      },
    getSchoolList () {
      this.$http.get('/weChatSchoolController/getLiveHistory', {
        pageNum: this.pageNo,
        pageSize: this.pageSize,
        ...this.searchModel
      }).then(value => {
//        backUrl: "http://zyfiles.ubzyw.com/video/wuhandaxuezb.MP4"
// endTime: "17:00"
// explainer: "王主任"
// id: "10"
// introduce: "武汉大学溯源于1893年清末湖广总督张之洞奏请清政府创办的自强学堂，历经传承演变，1928年定名为国立武汉大学，是近代中国第一批国立大学。1946年，学校已形成文、法、理、工、农、医 6大学院并驾齐驱的办学格局。新中国成立后，武汉大学受到党和政府的高度重视。1958年，毛泽东主席亲临武大视察。1993年，武汉大学百年校庆之际，江泽民等党和国家领导人题词祝贺。改革开放以来，武汉大学在国内高校中率先进行教育教学改革，各项事业蓬勃发展，整体实力明显上升。1999年，世界权威期刊《Science》杂志将武汉大学列为“中国最杰出的大学之一”。2000年，武汉大学与武汉水利电力大学、武汉测绘科技大学、湖北医科大学合并组建新的武汉大学，揭开了学校改革发展的崭新一页。合校十多年来，学校综合实力和核心竞争力不断提升，2018年，学校在QS世界大学排名中位列第257位。"
// liveImg: "https://zyfiles.ubzyw.com/ubzy/file/cZhxT4xcia.png"
// liveNo: null
// schoolLogo: "http://zyfiles.ubzyw.com/res/1509706473644.png"
// schoolName: "武汉大学"
// startTime: "16:00"
// status: "2"
// title: null
// url: "http://zyfiles.ubzyw.com/video/wuhandaxuezb.MP4"
        this.schoolList = value.list
        this.total = value.total
      })
    },
    getSchoolHotList () {
      this.$http.get('/schoolController/schoolSearchHistory')
        .then(value => {
          // "total": 28,
          // "schoolId": 1,
          // "schoolName": "山东大学"
          this.schoolHotList = value
        })
    }
  }
}
</script>

<style scoped lang="less">
.mb30{
  margin-bottom: 30px;
}
  .school-content {
    display: flex;
    margin-left: -10px;
    flex-wrap: wrap;
    .school-list-container {
      width:225px;
      margin-top: 15px;
      margin-left: 10px;
      .border-title {
        font-size: 22px;
        color: #1F2329;
      }

      .school-list {
        border-top: 1px solid #EFF0F1;
        margin-top: 10px;
      }

      .school-box {
        cursor: pointer;
        box-sizing: border-box;
        padding: 16px 8px;
        border-bottom: 1px solid #EFF0F1;
        display: flex;
        &:hover {
          .school-name, .school-region{
            color: #FF6B51;
          }
        }

        .school-list-left {
          flex: 1;
        }

        .school-list-right {
          width: 500px;
        }

        .school-img {
          width: 36px;
          height: 36px;
          vertical-align: middle;
          margin-right: 8px;
        }

        .school-name {
          display: inline-block;
          color: #1F2329;
          width: 180px;
        }

        .school-region {
          display: inline-block;
          color: #1F2329;
          width: 100px;
        }

        .school-property {
          display: inline-block;
          border: 1px solid #007EFA;
          border-radius: 26px;
          height: 26px;
          line-height: 26px;
          padding: 0 6px;
          font-size: 14px;
          color: #007EFA;
          font-style: normal;
          margin: 4px;
        }
      }
    }

    .school-hot-list-container {
      width: 453px;

      .school-hot-list {
        border-top: 1px solid #EFF0F1;
        margin-top: 10px;
      }

      .school-hot-box {
        cursor: pointer;
        height: 50px;
        line-height: 50px;
        padding-left: 10px;
        color: #373C43;

        &:hover {
          background: #FAFBFC;
          color: #FF6B51;
        }
      }
    }
  }
   .card-box {
    cursor: pointer;
    overflow: hidden;
    position: relative;
    width: 100%;
   
    .card-img {
      width: 100%;
       height: 126px;
      object-fit: cover;
      position: relative;
      .play{
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
      }
      .big-img {
        width: 100%;
        height: 100%;
      }
    }
    .card-label{
      position: absolute;
      top: 12px;
      right: 12px;
      padding: 4px 8px;
      opacity: 0.5;
      background: #000000;
      border-radius: 2px;
      color: #fff;
      font-size: 12px;
      z-index:100;
    }
    .card-text {
      background: #F5F6F7;
      box-sizing: border-box;
      padding: 12px;
      .title {
        color: #1F2329;
      }
      .text-active{
        color: #FF6B51;
      }
      .info {
        color: #646A73;
      }
    }
    .img-filter{
      filter:  opacity(60%);
    }
  }
</style>
